<template>
<div>
  <ul class="CONTENT">
    <el-col :span="1"><div class="grid-content bg-purple"> &nbsp; </div></el-col>
    <el-col :span="11"><div class="grid-content bg-purple">
          <li v-for="item in List" :key='item.id' class="content-left">
            <span @click="routerJump(item.id)">
              <img :src="item.src"><br>
              <span class="title">{{item.title}}</span><br>
              <span class="price">{{price}}<span>{{item.price}}<span>{{value}}</span></span></span><br>
              <span class="label" v-for="i in item.label" :key="i.id">{{i.name}}</span><br>
              <div class="LOCAL">
                <i class="el-icon-location-information"></i>
                {{item.university}}
                <div>
                  <span class="province">{{item.province}}</span>
                </div>
              </div>
          </span>
        </li>
      </div>
    </el-col>
    <el-col :span="11"><div class="grid-content bg-purple">
      <li v-for="item in List1" :key='item.id' class="content-right">
        <span @click="routerJump(item.id)">
          <img :src="item.src"><br>
          <span class="title">{{item.title}}</span><br>
          <span class="price">{{price}}<span>{{item.price}}<span>{{value}}</span></span></span><br>
          <span class="label" v-for="i in item.label" :key="i.id">{{i.name}}</span><br>
          <div class="LOCAL">
            <i class="el-icon-location-information"></i>
            {{item.university}}
            <div>
              <span class="province">{{item.province}}</span>
            </div>
          </div>
        </span>
      </li>
      </div>
    </el-col>
    <el-col :span="1"><div class="grid-content bg-purple">{{space}}</div></el-col>
  </ul>
</div>
</template>
<script>
export default {
  data () {
    return {
      List: [
        {
          id: 1,
          src: require('@/assets/images/Main/Content/Cloth.jpg'),
          title: '明日班级活动求潮搭，有喜欢的女孩会一起来,很重要！',
          price: 1,
          label: [
            {
              id: 1,
              name: 'left'
            },
            {
              id: 2,
              name: '搭配标签'
            }
          ],
          university: '中国矿业大学',
          city: '徐州',
          province: '江苏'
        },
        {
          id: 3,
          src: require('@/assets/images/Main/Content/Cloth.jpg'),
          title: '明日班级活动求潮搭，有喜欢的女孩会一起来',
          price: 1,
          label: [
            {
              id: 1,
              name: '搭配标签'
            },
            {
              id: 2,
              name: '搭配标签'
            }
          ],
          university: '中国矿业大学',
          city: '徐州',
          province: '江苏'
        },
        {
          id: 5,
          src: require('@/assets/images/Main/Content/Cloth.jpg'),
          title: '明日班级活动求潮搭，有喜欢的女孩会一起来',
          price: 1,
          label: [
            {
              id: 1,
              name: '搭配标签'
            },
            {
              id: 2,
              name: '搭配标签'
            }
          ],
          university: '中国矿业大学',
          city: '徐州',
          province: '江苏'
        }
      ],
      List1: [
        {
          id: 2,
          src: require('@/assets/images/Main/Content/Cloth.jpg'),
          title: '明日班级活动求潮搭，有喜欢的女孩会一起来,很重要！',
          price: 1,
          label: [
            {
              id: 1,
              name: 'right'
            },
            {
              id: 2,
              name: '搭配标签'
            }
          ],
          university: '中国矿业大学',
          city: '徐州',
          province: '江苏'
        },
        {
          id: 4,
          src: require('@/assets/images/Main/Content/Cloth.jpg'),
          title: '明日班级活动求潮搭，有喜欢的女孩会一起来',
          price: 1,
          label: [
            {
              id: 1,
              name: '搭配标签'
            },
            {
              id: 2,
              name: '搭配标签'
            }
          ],
          university: '中国矿业大学',
          city: '徐州',
          province: '江苏'
        },
        {
          id: 6,
          src: require('@/assets/images/Main/Content/Cloth.jpg'),
          title: '明日班级活动求潮搭，有喜欢的女孩会一起来',
          price: 1,
          label: [
            {
              id: 1,
              name: '搭配标签'
            },
            {
              id: 2,
              name: '搭配标签'
            }
          ],
          university: '中国矿业大学',
          city: '徐州',
          province: '江苏'
        }
      ],
      price: '答题悬赏',
      value: '鸵鸵币',
      space: ' '
    }
  },
  methods: {
    routerJump (e) {
      this.$router.push({
        path: '/WatchQuestion', query: { id: e } })
    }
  },
  watch: {
  }
}
</script>
<style lang="scss">
.CONTENT {
  padding: 0;
  text-align: LEFT;
  width: 100%;
  // padding-left: 10px;
  li {
    display: block;
    list-style-type: none;
    float: left;
    // margin-left: 1%;
    // margin-right: 1%;
    padding: 0 10px;
    // padding-right: 5px;
    img {
      width: 100%;
    }
    .title {
      font-family: 微软雅黑;
      font-size: 16px;
      font-weight: bold;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp:2;
      -webkit-box-orient: vertical;
      margin-bottom: -10%;
    }
    .price {
      font-family: 微软雅黑;
      font-size: 14px;
      color: gray;
      font-weight: normal;
      border-top: 50px;
      span {
        float: right;
        font-size: 16px;
        font-weight: bold;
        color: #E9BD7A;
      }
    }
    .label {
      border-radius: 30px;
      background-color: rgb(236, 211, 172);
      font-size: 10px;
      color: white;
      padding-top: 3%;
      padding-right: 3%;
      padding-left: 3%;
      padding-bottom: 3%;
      margin-right: 5px;
    }
    .LOCAL {
      margin-top: 5%;
      font-size: 12px;
      font-weight: bold;
      color: gray;
      padding-bottom: 5px;
      border-bottom: 2PX solid lavender;
      div {
        float: right;
      }
    }
  }
  .content-left {
    border-right: 2px solid lavender;
  }
  .content-right {
    border-left: 2px solid lavender;
  }
}
</style>
